<template>

          <!-- 页面标题 -->
            <div class="page-header">
              <h2 class="page-title">{{ currentPage }}</h2>
              <div class="page-actions">
                <el-button type="primary" :icon="Refresh" circle @click="refreshPage" />
                <el-button :icon="FullScreen" circle @click="toggleFullscreen" />
              </div>
            </div>
     <!-- 内容卡片 -->
            <el-card class="content-card" shadow="never">
              <template #header>
                <div class="card-header">
                  <span>欢迎使用智能冰箱管理系统</span>
                </div>
              </template>
              
              <!-- 这里放置具体页面内容 -->
              <div class="page-content">
                <el-empty description="请从左侧菜单选择功能" v-if="!currentPage || currentPage === '系统首页'">
                  <el-button type="primary">开始使用</el-button>
                </el-empty>
                <router-view v-else />
              </div>
            </el-card>
</template>
<script setup >

import { ref } from 'vue'

import {
Refresh,
FullScreen
} from '@element-plus/icons-vue'
    
const isFullscreen = ref(false)

// 刷新页面
const refreshPage = () => {
  location.reload()
}

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}
</script>
<style scoped>
    
</style>